<!DOCTYPE html>
<html ng-app="app">

<head>
    <link rel="stylesheet" href="assets/stylesheets/example.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="../website_libs/dev_deps.js"></script>
    <script src="https://code.angularjs.org/1.3.3/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.underscore.js"></script>
    <script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script><script src="../dist/angular-google-maps_dev_mapped.js"></script>
    <script src="assets/scripts/controllers/issue-930-polylines-updates.js"></script>
    <style type="text/css">
        .angular-google-map-container {
            width: 100%;
            height: 300px;
        }
    </style>
    <title>Map</title>
</head>

<body>
<div data-ng-controller="ctrl">
    <ui-gmap-google-map id="map"
                        center="map.center"
                        pan="map.pan"
                        zoom="map.zoom"
                        draggable="true"
                        refresh="map.refresh"
                        options="map.options"
                        events="map.events"
                        bounds="map.bounds">
        <ui-gmap-map-control template="widgets.tpl.html" position="top-right" index="1" controller="mapWidgetCtrl">
        </ui-gmap-map-control>

        <ui-gmap-polylines
                models="map.polys" path="'path'" stroke="'stroke'" visible="'visible'" geodesic="'geodesic'"
                fit="false" editable="'editable'" draggable="'draggable'"
                icons="'icons'">

        </ui-gmap-polylines>
    </ui-gmap-google-map>

    <div>
        <p>{{map.bounds}}</p>

        <div ng-repeat="p in map.polys track by p.id">Polyline {{p.id}}
            <table>
                <tr>
                    <th>Static</th>
                    <th>Editable</th>
                    <th>draggable</th>
                    <th>Path</th>
                </tr>
                <tr>
                    <td>
                        <input type="text" ng-model="p.static"/>
                    </td>
                    <td>
                        <input type="text" ng-model="p.editable"/>
                    </td>
                    <td>
                        <input type="text" ng-model="p.draggable"/>
                    </td>
                    <td>
                        <table>
                            <tr>
                                <th>Latitude</th>
                                <th>Longitude</th>
                            </tr>
                            <tr ng-repeat="m in p.path">
                                <td>
                                    <input type="text" ng-model="m.latitude"/>
                                </td>
                                <td>
                                    <input type="text" ng-model="m.longitude"/>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            static: {{p.static}}
            editable: {{p.editable}}
            draggable: {{p.draggable}}
            path: {{p.path}}
        </div>
    </div>
</div>
</body>

</html>


